<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        body>#add{
           margin-top: 10px;
        }
        body>#workerInterface {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #workerInterface {
            width: 1200px;
        }

        td,
        th {
            padding: 10px 20px;
            text-align: center;
        }
        #addWorker{
            display: none;
            padding: 80px;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.6);
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #addWorkerInterface{
            width: 1200px;
            height: 600px;
            background-color: aliceblue;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        #addWorkerInterface>div{
            margin: 14px;
        }
        #addWorkerInterface>div:nth-child(6){
            width: 100%;
            display:flex;
            justify-content: space-evenly;
            align-items: center; 
        }
        #modifyModal {
            display: none;
            background-color: rgba(0, 0, 0, 0.5);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            /* 预防被盖住 */

        }

        .modifyModal {
            width: 100%;
            height: 100%;
            z-index: 100;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        #modifyModalContent {
            padding: 20px;
            background-color: #fff;
        }
        #modifyModalContent>div{
            margin-top: 10px;
        }
        #modifyModalContent>div:nth-child(6){
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    </style>
</head>

<body>
    <div id="add"><button type="button" class="btn btn-info"><span>添加成员</span></button></div>
    <div>
        <hr style="color: rgba(0,0,0,0.5); width: 1200px;" />
    </div>
    <div id="workerInterface">
        <table border="1">
            <thead>
                <tr>
                    <th>成员姓名</th>
                    <th>证件号码</th>
                    <th>成员性别</th>
                    <th>成员年龄</th>
                    <th>成员电话</th>
                    <th>部分操作</th>
                </tr>
            </thead>
            <tbody>
        
            </tbody>
        </table>
    </div>
    <div id="addWorker">
        <div id="addWorkerInterface">
            <div><span>添加员工姓名：</span><input id="newName" type="text" placeholder="输入添加人员姓名:"></div>
            <div><span>添加证件号码：</span><input id="newIdentityCard" type="text" placeholder="输入添加人员证件号码:"></div>
            <div><span>添加员工性别：</span><input id="newGender" type="text" placeholder="输入添加人员性别:"></div>
            <div><span>添加员工年龄：</span><input id="newAge" type="text" placeholder="输入添加人员年龄:"></div>
            <div><span>添加员工电话：</span><input id="newPhoneNumber" type="text" placeholder="输入添加人员电话:"></div>
            <div>
                <button id="confirmBtn1">确认</button>
                <button id="cancelBtn1">取消</button>
            </div>
        </div>
    </div>
    <div id="modifyModal">
        <div class="modifyModal">
            <div id="modifyModalContent">
                <!-- form会导致按钮的自动关闭 -->
                <!-- <form> -->
                <!-- 用户不能修改自己的学号 -->
                <div style="display: none;" class="row">
                    <label class="col-sm-4">员工id：</label>
                    <input class="col-sm-7" disabled type="text" id="workerId" placeholder="员工不能修改自身id" />
                </div>
                <div class="row">
                    <label class="col-sm-4">员工姓名</label>
                    <input class="col-sm-8" disabled type="text" id="workerName" placeholder="请输入你要修改的员工姓名" />
                </div>
                <div class="row">
                    <label class="col-sm-4">证件号码</label>
                    <input class="col-sm-8" type="text" id="workerIdentityCard" placeholder="请输入你要修改的员工证件号码" />
                </div>
                <div class="row">
                    <label class="col-sm-4">员工性别</label>
                    <input class="col-sm-8" type="text" id="workerGender" placeholder="请输入你要修改的员工性别" />
                </div>
                <div class="row">
                    <label class="col-sm-4">员工年龄</label>
                    <input class="col-sm-8" type="text" id="workerAge" placeholder="请输入你要修改的员工年龄" />
                </div>
                <div class="row">
                    <label class="col-sm-4">员工电话</label>
                    <input class="col-sm-8" type="text" id="workerPhoneNumber" placeholder="请输入你要修改的员工电话" />
                </div>
                <div>
                    <button id="confirmBtn">确认</button>
                    <button id="cancelBtn">取消</button>
                </div>
                <!-- </form> -->
            </div>
        </div>

    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">提示框</h4>
                </div>
                <div class="modal-body">是否确定要删除该工人？？？</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消删除</button>
                    <button type="button" id="is" class="btn btn-primary">确认删除</button>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./增删查改.js"></script>
</body>

</html>